<template>
	<view>
		<view class="base-info">
			<view class="base-item date">
				<view class="label">日期</view>
				<view class="value">{{''+baseInfo.date+''}}
					<image class="arrow-right-img" src="" style="margin-left:0rpx;"></image>
				</view>
			</view>
			<view class="split-line"></view>
			<view class="base-item time">
				<view class="label">时间</view>
				<view class="value">{{''+baseInfo.time+''}}
					<image class="arrow-right-img" src="" style="margin-left:0rpx;"></image>
				</view>
			</view>
		</view>
		<view class="weight" v-for="(item,index) in weightList" :key="index">
			<view class="card">
				<view class="card-title">{{item.title}}</view>
				<view class="number">
					<text class="text_number">{{item.showValue}}</text>
					<text class="text_small">{{item.unit}}</text>
				</view>
				<view class="sapling-vue-scale">
					<horizontal-rule></horizontal-rule>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<button class="btn" @click="saveHandle" type="warn">保存</button>
		</view>
	</view>

</template>

<script>
	import horizontalRule from '@/components/horizontal-rule/horizontal-rule.vue'
	export default {
		components: {
			'horizontal-rule': horizontalRule
		},
		data() {
			return {
				baseInfo: {
					date: this.getDate({
						format: true
					}),
					time: this.getHM(),
					weightValue: 30,
					rateValue: 0,
				},
				ruleInfo: {
					weightValue: 30,
					rateValue: 0
				},
				projectUserId: 0,
				weightList: [{
					title: '体重',
					showValue: '76.2',
					unit: '公斤'
				}, {
					title: '体脂率',
					showValue: '27.1',
					unit: '%'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			getDate: function(e) {
				var t = new Date(),
					n = t.getFullYear(),
					a = t.getMonth() + 1,
					r = t.getDate();
				return (
					"start" === e ? (n -= 60) : "end" === e && (n += 2),
					(a = a > 9 ? a : "0" + a),
					(r = r > 9 ? r : "0" + r),
					"".concat(n, "-").concat(a, "-").concat(r)
				);
			},
			getHM: function() {
				var e = new Date().getHours(),
					t =
					new Date().getMinutes() < 10 ?
					"0" + new Date().getMinutes() :
					new Date().getMinutes();
				new Date().getSeconds(), new Date().getSeconds();
				return e + ":" + t;
			},
			saveHandle() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	page {
		background-color: #f2f3f5;
		min-height: 100%;
		min-width: 100%;
	}

	.base-info {
		background: #fff;
		border-radius: 30rpx;
		margin: 0 20rpx 20rpx;
		padding: 30rpx;
	}

	.base-info .split-line {
		background-color: #e7e7e7;
		height: 1rpx;
		margin: 20rpx 0;
	}

	.base-info .base-item {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.base-info .base-item .label {
		font-size: 32rpx;
		font-weight: 700;
	}

	.base-info .base-item .value {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		font-size: 28rpx;
	}

	.base-info .base-item .value .uni-input {
		padding: 0;
	}

	.base-info .base-item .value .arrow-right-img {
		height: 48rpx;
		width: 48rpx;
	}

	.weight {
		margin: 0 20rpx 20rpx;
	}

	.bottom-btn {
		background-color: #f2f3f5;
		bottom: 0;
		flex-direction: column;
		height: 140rpx;
		left: 50%;
		position: fixed;
		transform: translateX(-50%);
		width: 100%;
	}

	.bottom-btn,
	.bottom-btn .btn {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
	}

	.bottom-btn .btn {
		background-color: #ef4141;
		border-radius: 50rpx;
		color: #fff;
		font-size: 32rpx;
		height: 80rpx;
		width: 90%;
	}

	.bottom-btn .btn:active {
		background-color: #f79f9f;
	}

	.card {
		background: #fff;
		border-radius: 30rpx;
		padding: 24rpx;
	}

	.card .card-title {
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 8rpx;
	}

	.card .weight {
		color: #333;
		font-size: 32rpx;
		font-weight: 700;
		margin-left: 20rpx;
		margin-top: 32rpx;
	}

	.card .number {
		align-items: baseline;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.card .number .text_number {
		color: #fa5150;
		font-size: 40rpx;
		font-weight: 700;
	}

	.card .number .text_small {
		color: #fa5150;
		font-size: 28rpx;
		margin-left: 4rpx;
	}

	.card .sapling-vue-scale {
		height: 144rpx;
	}
</style>